<template>
	<view class="body">
		<view class="bg-white">
			<u-tabs :current='active' :list="menu" lineColor='#FF7E11' activeStyle='color:#FF7E11' :scrollable='false'
				@change="setAct"></u-tabs>
		</view>
		<view class="list p20 ">
			<view class="item br12 bg-white" v-for="(item,index) in list" :key="index">
				<view class="top d-b-c">
					<view class="left bg-red d-c-c d-c white">
						<view class="">￥<text class="f50 fb">{{item.price}}</text></view>
						<view class="f18">满{{item.max}}可用</view>
					</view>
					<view class="right d-b-e flex-1 pt20 pb10 pl20 pr20">
						<view class="gray9">
							<view class="f20">{{item.content}}</view>
							<view class="f18 mt10">{{item.time}}</view>
							<view @click="setDown(index)" class="d-s-c f18 mt10">
								<text class="mr10">使用规则</text>
								<u-icon name="arrow-down" size="12"
									:customStyle='item.show?"transform:rotate(180deg)":""'></u-icon>
							</view>
						</view>
						<view>
							<u-button v-if="active!=1" size="mini" text="立即使用" shape="circle"
								color="#F91717"></u-button>
							<u-button v-else size="mini" text="已使用" shape="circle" color="#C9C9C9"></u-button>
						</view>
					</view>
				</view>
				<view class="bottom f18" :class='item.show?"active":""'>
					<view class="p20" v-html="item.tip"></view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadmore" line></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadmore: 'nomore',
				menu: [{
					name: "未使用"
				}, {
					name: "已使用"
				}, {
					name: "已过期"
				}],
				active: 0,
				list: [{
					price: 5,
					max: 200,
					content: '适用于在钱包APP或利洁能源加油小程序购买利洁能源加油券',
					time: "2025.02.11-2025.02.14",
					tip: `1.本券仅限购买活动页面中的利洁能源加油券时使用，具体可用产品以卡券跳转页面展示为准（内蒙古、宁夏、辽宁，黑龙江地区不可使用）；<br>
						  2.本券在有效期内使用，过期无效，不可重复使用，不可转让或退还；<br>
						  3.本券不可叠加其他优惠活动使用`,
					show: false
				}]
			}
		},
		methods: {
			setDown(i) {
				// this.list[i].show = !this.list[i].show
				this.$set(this.list[i], 'show', !this.list[i].show)
				console.log(this.list[i].show);
			},
			setAct({ index }) {
				this.active = index
			}
		}
	}
</script>

<style scoped lang="scss">
	.item {
		.left {
			width: 160rpx;
			height: 160rpx;
			background-image: url('/static/image/coupon_bg.png');
			background-size: 60rpx;
			background-position: 10rpx calc(100% - 10rpx);
			background-repeat: no-repeat;
		}

		.bottom {
			max-height: 0;
			overflow: hidden;
			transition: 0.3s;
			line-height: 1.5;
		}

		.active {
			max-height: 200rpx;
			transition: 0.3s;

		}
	}

	.body {
		min-height: 100vh;
		background-color: #f4f4f4;
	}
</style>